<!--区域/单位分析-->
<script setup>
import MCard from '@/components/MCard.vue'
import BarCharts from '@/components/Charts/BarCharts.vue'
import { useStatistics } from '@/composables/useStatistics.js'
import RankingList from '@/views/statistics/components/RankingList.vue'
import { usePermissionStore } from '@/stores/permission'
import { useStatisticsFromStore } from '@/stores/statistics.js'
const { user } = usePermissionStore()
const { statistics } = useStatisticsFromStore()
const {
  getStatStatRegionStatData,
  statStatRegionStatData,
  getTimeSpendRankData,
  timeSpendRankData,
  getStatStatByOfficeAndLevelData,
  statStatByOfficeAndLevelData
} = useStatistics()
const activeName = ref('REGION')
const isShow = ref(false)
const listTa = ref([
  {
    name: '州市统计',
    value: 'REGION',
    disable: true
  },
  {
    name: '处室统计',
    value: 'OFFICE',
    disable: false
  },
  {
    name: '直属单位统计',
    value: 'DIRECT_UNIT',
    disable: false
  }
])
const state = reactive({
  query: {
    ...statistics.timeSpendRank,
    orgType: activeName.value
  },

  tableData: [],
  columns: [
    { key: 'index', label: '序号', span: 5 },
    { key: 'areaName', label: '地区', span: 9 },
    { key: 'avgSpendStr', label: '时间', span: 10 }
  ]
})

watch(
  () => activeName.value,
  (newVal) => {
    state.query.orgType = newVal
    if (newVal === 'REGION') {
      getStatStatRegionStatData(state.query)
      //  getTimeSpendRankData(state.query) setCustomTitle
      console.log(statStatRegionStatData, '===e')
      state.tableData = statStatRegionStatData
    } else {
      getStatStatByOfficeAndLevelData(state.query)
      //  getTimeSpendRankData(state.query)
      state.tableData = statStatByOfficeAndLevelData
    }
  }
)

watch(
  () => statistics,
  (val) => {
    state.query.areaCode = val.areaCode
    state.query.createTimeEnd = val.timeSpendRank.createTimeEnd
    state.query.createTimeStart = val.timeSpendRank.createTimeStart
    if (state.query.createTimeStart && state.query.createTimeEnd) {
      if (activeName.value === 'REGION') {
        getStatStatRegionStatData(state.query)
        getTimeSpendRankData(state.query)
        state.tableData = statStatRegionStatData
      } else {
        getStatStatByOfficeAndLevelData(state.query)
        getTimeSpendRankData(state.query)
        state.tableData = statStatByOfficeAndLevelData
      }
    }
  },
  { deep: true }
)

onMounted(async () => {
  if (user.level < 2) {
    listTa.value[0].name = '州市统计'
  } else if (user?.innerRoleCode?.includes('city')) {
    listTa.value[0].name = '区县统计'
  }

  await getStatStatRegionStatData(state.query)
  state.tableData = statStatRegionStatData
  await getTimeSpendRankData(state.query)
  await getStatStatByOfficeAndLevelData({
    ...state.query,
    orgType: 'OFFICE'
  })

  const datasOne = statStatByOfficeAndLevelData.value
  if (datasOne && datasOne.length) {
    listTa.value[1].disable = true
  }
  await getStatStatByOfficeAndLevelData({
    ...state.query,
    orgType: 'DIRECT_UNIT'
  })
  isShow.value = true
  const datasTwo = statStatByOfficeAndLevelData.value
  if (datasTwo && datasTwo.length) {
    listTa.value[2].disable = true
  }
  console.log(datasOne, datasTwo)
})
</script>

<template>
  <div>
    <MCard title="区域分布">
      <van-tabs
        v-model="activeName"
        v-if="isShow"
        color="#36B374"
        title-active-color="#36B374"
      >
        <template v-for="tab in listTa">
          <van-tab
            title-style="flex:none;"
            :title-class="`text-14px`"
            :key="tab.value"
            v-if="tab.disable"
            :title="tab.name"
            :name="tab.value"
          />
        </template>
      </van-tabs>
      <BarCharts
        v-if="isShow && state.tableData && state.tableData?.length"
        :data="state.tableData"
        eid="region-or-unit-analysis"
      />
    </MCard>
    <MCard title="处理时长统计" v-if="activeName === 'REGION'">
      <RankingList :data="timeSpendRankData" :columns="state.columns" />
    </MCard>
    <div class="h-80px"></div>
  </div>
</template>

<style scoped lang="less"></style>
